@charset "UTF-8";
/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 *  ---- WARNING ----
 * Do not add any imports to this file. It is intended as pure-mixins, as comments in shared/_mixins.scss
 * If you add imports here they will end up creation a lot of duplicated CSS, especially from
 * fontawesome due to size and the number of places this is imported.
 */
@use "sass:map";

<%
  variables = {}
  variable_definitions = File.read(File.join(Rails.root, 'node_modules/@fortawesome/fontawesome-free/scss/_variables.scss')).lines.grep(/\$fa-var-/).collect(&:strip)
  variable_definitions.each do |definition|
    definition =~ /\$fa-var-(.*): \\(.*);/
    variables[$1] = $2
  end
%>

$fa-font-icons: (
<% variables.each do |name, unicode| %>
  fa-var-<%= name %>: "<%= unicode %>",
<% end %>
);

@function unicode($str) {
  @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}

@mixin icon-glyph($icon) {
  @if map.has-key($fa-font-icons, $icon) {
    content: unicode(map.get($fa-font-icons, $icon));
  } @else {
    @error "Could not find icon #{$icon}";
  }
}

@mixin icon-only($type, $font: "FontAwesome") {
  @if $font == "FontAwesome" {
    font-family: $font, sans-serif;
    font-weight: 900;
  } @else if $font == "FontAwesomeBrands" {
    font-family: $font, sans-serif;
    font-weight: 400;
  } @else {
    @error "Could not find font family #{$font}";
  }

  @include icon-glyph("fa-var-#{$type}");
}

@mixin icon($type, $size: auto, $margin: auto, $line-height: 1em, $color: auto, $top: auto, $shadow: none, $font: "FontAwesome") {
  @include icon-only($type: $type, $font: $font);

  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  line-height: $line-height;

  @if $margin != auto {
    margin: $margin;
  }
  @if $size != auto {
    font-size: $size;
  }
  @if $top != auto {
    position: relative;
    top: $top;
  }
  @if $color != auto {
    color: $color;
  }
  @if $shadow != none {
    text-shadow: $shadow;
  }
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin in-progress-spinner($type: spinner) {
  @include icon-only($type: $type);
  @include animation(spin 1s linear infinite);
}

@mixin icon-before($type, $size: auto, $margin: 5px, $line-height: 1em, $color: auto, $top: auto, $shadow: none, $font: "FontAwesome", $progress-spinner: false) {
  &:before {
    @include icon($type, $size, $margin, $line-height, $color, $top, $shadow, $font: $font);
    @content;
  }

  @if $progress-spinner == true {
    &.in-progress::before {
      @include in-progress-spinner;
    }
  }
}

@mixin icon-after($type, $size: auto, $margin: 5px, $line-height: 1em, $color: auto, $top: auto, $shadow: none, $font: "FontAwesome", $progress-spinner: false) {
  &:after {
    @include icon($type, $size, $margin, $line-height, $color, $top, $shadow, $font: $font);
    @content;
  }

  @if $progress-spinner == true {
    &.in-progress::after {
      @include in-progress-spinner;
    }
  }
}
